<template>
  <div>
    <van-row class="header" type="flex" align="center">
      <van-col class="location" span="3" @click="toMap">
        {{ $store.state.home.position }}
      </van-col>
      <van-col span="21"><van-search @click="toSearch" placeholder="搜索商品" /></van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      location: "",
    };
  },
  methods: {
    toMap() {
      this.$router.push("/map");
    },
    toSearch(){
      this.$router.push("/search");
    }
  },
};
</script>

<style lang="scss" scoped>
.location {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header {
  background-color: #fff;
  padding: 0 10px;
  box-sizing: border-box;
  height: 44px;
}

.van-search {
  height: 44px;
}

.van-search .van-search__content {
  background-color: #fff;
}
</style>